import React from "react";
import {ExecTask, GetTaskCategory, GetTaskList} from "../../services/laike/task";
import {Button, Table, Tag, message, Divider, Popconfirm} from "antd";
import TaskForm from "./form";
import Search from "./search";
import store from "../../store";

function TaskManage() {

    const columns = [
        {
            title: 'TaskId',
            dataIndex: 'Id',    // 等同于field
            key: 'Id', // dataIndex唯一的话可以忽略
        },
        {
            title: '描述',
            dataIndex: 'Desc',
        },
        {
            title: 'Func键值',
            dataIndex: 'FuncName',
        },
        {
            title: '状态',
            dataIndex: 'Status',
            render: (status) => {
                let color = status === 1 ? "geekblue" : "volcano";
                let value = status === 1 ? "启用" : "禁用"

                return (
                    <Tag color={color}>
                        {value}
                    </Tag>
                )
            }
        },{
            title:"类别",
            dataIndex:'Category',
            render:(value)=>{
                return (
                    <Tag >
                        {value}
                    </Tag>
                )
            }
        },
        {
            title: '执行周期(秒)',
            dataIndex: 'CycleTime',
        },
        {
            title: '上次执行时间',
            dataIndex: 'LastExecTime',
        },
        {
            title: '下次执行时间',
            dataIndex: 'NextExecTime',
        },
        {
            title: '谨慎操作',
            key: 'action',
            render: (data) => {
                return (
                    <>
                        <Button type="primary" onClick={() => {
                            showForm(data)
                        }}>编辑</Button>
                        &nbsp;
                        <Popconfirm
                            title="确定要立刻执行该Task吗？"
                            onConfirm={() => {
                                confirmExec(data)
                            }}
                        >
                            <Button type="ghost">立即执行</Button>
                        </Popconfirm>
                    </>
                )
            },
        },
    ];

    let [taskData, setTaskData] = React.useState([]) // 单个task的数据
    let [modalVisible, setModalVisible] = React.useState(false)   // 表单显示控制
    let [taskList, setTaskList] = React.useState([])    // task列表

    React.useEffect(() => {
        getTaskList()
    }, [])

    const getTaskList = async () => {

        // 去redux获取当前的搜索条件
        let searchParams = store.getState().taskSearch

        await GetTaskList(searchParams.params).then(res => {

            let data = res.data
            if (data.Code !== 200) {
                message.error("请求失败", data.Msg)
            }

            setTaskList(data.Data)
        }).catch(error => {
            console.log("getTaskList Error:", error)
        })
    }

    const showForm = (data) => {
        setTaskData(data)
        setModalVisible(true)
    }

    const closeForm = (isRefresh) => {

        if (isRefresh) {
            getTaskList()
        }

        setModalVisible(false)
    }

    const confirmExec = (taskData) => {

        ExecTask(taskData).then(res => {

            let data = res.data
            if (data.Code !== 200) {
                message.error(data.Msg)
                return
            }
            message.success(data.Msg);

        }).catch(error => {
            message.error(error)
        })


    }

    return (
        <>
            <Search reFreshTable={setTaskList.bind(this)} showForm={showForm.bind(this)}/>

            <Divider/>

            <Table dataSource={taskList} columns={columns} rowKey={record => record.Id}/>

            <TaskForm visible={modalVisible} taskData={taskData} cancelFunc={closeForm.bind(this)}/>
        </>
    )
}

export default TaskManage